Elementen groeperen

HTML

<fieldset></fieldset>

De meeste browsers tonen de fieldset met een rand errond om aan te geven hoe ze gegroepeerd zijn. Het uiterlijk van deze lijnen kan met behulp van CSS worden aangepast.

HTML attributen

<legend>

Het element <legend> kan direct na de openingstag <fieldset> komen en bevat een opschrift waarmee het doel van de groep besturingselementen kan worden verduidelijkt.

Voorbeeld

<fieldset>
    <legend>Persoonlijke gegevens</legend>
    <div>
        <label for="firstname">Naam</label>
        <input id="firstname" type="text" name="firstname" required="required" placeholder="Jef">
    </div>
    <div>
        <label>Wachtwoord
            <input type="password" name="password" maxlength="20" id="password"></label>
    </div>
    <div>
        <input type="radio" name="sex" value="male" id="male">
            <label for="male">Man</label>
        <input type="radio" name="sex" value="female" id="female">
            <label for="female">Vrouw</label>
        <input type="radio" name="sex" value="unknown" id="unknown">
            <label for="unknown">Onbekend</label>
    </div>
</fieldset>
<fieldset>
    <legend>Modules</legend>
    <div>
        <input type="checkbox" name="module" value="A6" id="A6">
            <label for="A6">Programmeren 1</label>
        <input type="checkbox" name="module" value="A4" id="A4">
            <label for="A4">Multimedia</label>
        <input type="checkbox" name="module" value="A4" id="B1">
            <label for="B1">Programmeren 3</label>
        <input type="checkbox" name="module" value="A4" id="A8">
            <label for="A8">Databanken</label>
    </div>
</fieldset>

Resultaat: